<template>
  <a-card>
    <template #title>
      <a-form layout="vertical">
        <a-row :gutter="24">
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('银行名称')">
              <a-input v-model:value="page.bankName" allowClear/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('银行编码')">
              <a-input v-model:value="page.bankCode" allowClear/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24" style="text-align: right">
            <a-button type="primary" @click="getTableData">{{ $t('查询') }}</a-button>
            <a-button style="margin-left: 10px" @click="resetSearch">{{ $t('重置') }}</a-button>
          </a-col>
        </a-row>
      </a-form>
    </template>
    <div style="margin-bottom: 10px;text-align: right">
    </div>
    <a-table row-key="id" :data-source="tableData" :columns="tableColumn"
             :scroll="{x:1000}"
             :pagination="pagination">
      <template #handle="{record}">
        <a-button type="link" @click="editCard(record)">{{
            $t('编辑')
          }}
        </a-button>
      </template>
    </a-table>
    <a-modal v-model:visible="statusVisible" :title="statusForm.bankName + '-' + $t('编辑')" :after-close="close"
             @ok="editConfirm()">
      <a-form :model="statusForm" ref="formRef">
        <a-form-item :label="$t('每日分单数量上线')" prop="score" :rules="[
             {required:true,message:$t('不能为空')}
        ]">
          <a-input v-model:value="statusForm.score" allowClear/>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script>
import {computed, onMounted, reactive, toRefs, ref} from "vue";
import {offlineSetList, offlineSetUpdate} from "../../../api/system"
import i18n from "../../../locale";
import {message} from "ant-design-vue";

const $t = i18n.global.t
const tableColumn = [
  {title: $t('银行编码'), dataIndex: 'bankCode', align: 'center'},
  {title: $t('银行名称'), dataIndex: 'bankName', align: 'center'},
  {title: $t('每日分单数量上限'), dataIndex: 'score', align: 'center'},
  {title: $t('操作'), fixed: 'right', align: 'center', slots: {customRender: 'handle'}},
]
export default {
  name: "OfflinePayment",
  setup() {
    const state = reactive({
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tableData: [],
      merchantList: [],
      statusVisible: false,
      statusForm: {},
    })
    const formRef = ref(null)
    const pagination = computed(() => ({
      current: state.page.pageNum,
      total: state.page.total,
      pageSize: state.page.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
      pageSizeOptions: ['10', '50', '100', '200'],
      showTotal: total => total + $t('条'),
      onChange: (value) => {
        state.page.pageNum = value
        methods.getTableData()
      },
      onShowSizeChange: (page, size) => {
        state.page.pageNum = page
        state.page.pageSize = size
        methods.getTableData()
      }
    }))
    const methods = {
      async getTableData() {
        const res = await offlineSetList(state.page)
        if (res.code === 200) {
          const {list, total} = res.data
          state.tableData = list
          state.page.total = total
        }
      },
      resetSearch() {
        state.page = {
          pageNum: 1,
          pageSize: 10,
          total: 0
        }
        methods.getTableData()
      },
      editCard(row) {
        state.statusVisible = true
        state.statusForm = {...row}
      },
      editConfirm() {
        formRef.value.validate().then(async (v) => {
          if (v) {
            const params = {
              id: state.statusForm.id,
              score: state.statusForm.score
            }
            const res = await offlineSetUpdate(params)
            if (res.code === 200) {
              state.statusVisible = false
              message.success($t('操作成功'))
              methods.getTableData()
            }
          }
        })
      },
      close() {
        formRef.value.resetFields()
      }
    }
    onMounted(() => {
      methods.getTableData()
    })
    return {
      ...toRefs(state),
      ...methods,
      formRef,
      pagination,
      tableColumn
    }
  }
}
</script>

<style scoped>

</style>
